<template>
<!-- 定制  欧普  查看3D效果 -->
  <div class="associated_goods" v-show="showAssociatedGoods">
    <section class="mdetail_goodsdet_detail recommendation_logo block_logo">
      <span class="liner_detail"></span>
      <span class="detail_content">
        <i>
          <a class="goodsdet_detail">关联商品</a>
        </i>
      </span>
      <span class="liner_detail"></span>
    </section>
    <section class="goods_recommendation_con associated_goods_con">
      <ul class="clearfix">
        <li v-for="(item,index) in lists" :key="index">
          <a :href="item.link_item">
            <div class="img_goods">
              <img :src="item.file_path" alt />
            </div>
            <div class="goods_txt">
              <div class="goods_title">{{item.title}}</div>
              <div class="goods_detail">
                <div class="price" v-html="scaleGoodsPriceFn(item.price)">
                </div>                
                <div class="pic_box"><del class="yj">&yen;{{item.original_price}}</del></div>
                <div class="num" v-if="item.is_lists_sales == 1">
                  <span v-html="item.basic_sales*1 + item.real_sales*1"></span>件已售
                </div>
              </div>
            </div>
          </a>
        </li>          
      </ul>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { getItemGroup3DLinks } from '@/api/dz/dzApi'
import { scaleGoodsPrice } from '@/utils/index'
export default Vue.extend({
  name: 'index',
  props: {
    itemId: {
      type: String
    }
  },
  data() {
    return {
      showAssociatedGoods: false,
      lists: []
    }
  },
  methods: {
    init() {
      const params = { item_id: this.itemId }
      getItemGroup3DLinks(params).then(res => {
        /* res.item_group = [{
          file_path: 'http://img.wifenxiao.com/16/79/6/2018-04/5ad152b97bad8.jpg',
          title: '标题',
          original_price: '33.22',
          price: '35.28',
          sales: '33'
        }, {
          file_path: 'http://img.wifenxiao.com/16/79/6/2018-04/5ad152b97bad8.jpg',
          title: '标题',
          original_price: '33.22',
          price: '35.28',
          sales: '33'
        }]
        res.links = ['http://img.wifenxiao.com/16/79/6/2018-04/5ad152b97bad8.jpg', 'http://img.wifenxiao.com/16/79/6/2018-04/5ad152b97bad8.jpg'] */
        if (res.item_group && res.item_group.length > 0) {
          this.lists = res.item_group
          this.showAssociatedGoods = true
        }
      })
    },

    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    }
  },
  created() {
    this.init()
  }
})
</script>
<style lang="scss">
.goods_recommendation_con{
  .price-scale {
    .num-font{
      font-size:32px;
    }
  }
}
</style>
<style  lang="scss">
@import "src/styles/mixin";
.associated_goods{
  margin-bottom:20px;
  //详情等标题
  .block_logo {
    font-size: 28px;
    text-align: center;
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .detail_content {
      padding: 0 20px;
    }
    .liner_detail {
      width:35px;
      height:14px;
      background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/detail_left.png") no-repeat;
      background-size:100% 100%;
      &:last-child {
        background-image:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/detail_right.png");
      }
    }
  }
  .goods_recommendation_con {
    a {
      color: #333;
    }
    ul {
      padding: 20px 20px 100px;
    }
    li {
      position:relative;
      overflow: hidden;
      float: left;
      width: 48.5%;
      margin-bottom: 16px;
      border-radius: 10px;
      background: #fff;
      &:nth-child(2n + 1) {
        margin-right: 3%;
      }
      .img_goods {
        overflow: hidden;
        position: relative;
        height: auto;
        padding-top:100%;
      }
      img {
        // width:100%;
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
      }
      .goods_txt {
        padding: 10px 20px 20px;
        .goods_title {
          @include lineClamp(28px,1.5,1);
        }
        .goods_detail {
          padding: 10px 0;
          .price,.pic_box{
            display:inline-block;
          }
        }
        .num {
          margin-top:4px;
          color: #999;
        }
      }    
      .shop-cart{
        position:absolute;
        right:20px;
        bottom:30px;
        width:58px;
        height:58px;
        background:url("https://img.wifenxiao.com/h5-wfx/images/item/detail/detail-cart.png") no-repeat;
        background-size:100% 100%;
      }
    }
  }
}
</style>
